<template>
  <div class="goodsGuanIndex">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>请输入商品名</span>
        <el-button type="primary" round @click="createFn">创建</el-button>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!-- two 搜索框-->
      <div class="search">
        <el-input
          placeholder="请输入内容"
          v-model="val"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchFn(val)"
          ></el-button>
        </el-input>

        <!-- ----------------------------------------------------------- -->

        <!-- three----------日期 -->
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="datachangeFn"
        >
        </el-date-picker>
      </div>

      <!-- --------------------------------------------------- -->

      <!-- four--------------------------------------------- -->
      <el-table :data="tableData" style="width: 100%">
        <!-- 第一栏 -->
        <el-table-column prop="goods_id" label="编号" width="50">
        </el-table-column>

        <!-- 第二栏 -->
        <el-table-column
          prop="cat_name"
          label="分类名称"
          width="80"
        ></el-table-column>

        <!-- 第三栏 -->
        <el-table-column prop="goods_img" label="图片">
          <template slot-scope="scope">
            <img
              :src="'http://tmp00001.zhaodashen.cn/' + scope.row.goods_img"
              width="50"
              height="80"
            />
          </template>
        </el-table-column>

        <!-- 第四栏 -->
        <el-table-column
          prop="goods_name"
          label="标题"
          width="80"
        ></el-table-column>

        <!-- 第五栏 -->
        <el-table-column prop="goods_number" label="库存" width="50">
        </el-table-column>

        <!-- 第六栏 -->
        <el-table-column prop="market_price" label="价格" width="80">
        </el-table-column>

        <!-- 第七栏 -->
        <el-table-column prop="shop_price" label="促销价" width="80">
        </el-table-column>

        <!-- 第八栏 -->
        <el-table-column prop="add_time" label="创建于" width="110">
        </el-table-column>

        <!--  第九栏 -->
        <el-table-column prop="is_best" label="上架" width="60">
          <template slot-scope="item">
            <el-switch
              @change="changeFn($event, item.row, 'is_best')"
              active-value="1"
              inactive-value="0"
              v-model="item.row.is_best"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 第十栏 -->
        <el-table-column prop="is_hot" label="热卖" width="60">
          <template slot-scope="item">
            <el-switch
              @change="changeFn($event, item.row, 'is_hot')"
              active-value="1"
              inactive-value="0"
              v-model="item.row.is_hot"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 第十一栏 -->
        <el-table-column prop="is_new" label="推荐" width="60">
          <template slot-scope="item">
            <el-switch
              @change="changeFn($event, item.row, 'is_new')"
              active-value="1"
              inactive-value="0"
              v-model="item.row.is_new"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 第十二栏 -->
        <el-table-column prop="is_sell" label="新品" width="60">
          <template slot-scope="item">
            <el-switch
              @change="changeFn($event, item.row, 'is_sell')"
              active-value="1"
              inactive-value="0"
              v-model="item.row.is_sell"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 第十三栏 -->
        <el-table-column label="操作" class="cell" width="120">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editFn(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(scope.row.cat_id)"
            >
            </el-button>
          </template>
        </el-table-column>
        <!-- 最后一栏：里面包含两个按钮 使用插槽的方法  <template slot-scope="scope"></template>-->
      </el-table>
      <!----------------------------------------------------------------------  -->

      <!-- five----编辑弹框------------------------------------------------------------ -->
      <el-dialog
        title="编辑商品类型"
        :visible.sync="isShowEditTk"
        width="30%"
        :before-close="handleClose"
      >
        <!-- form -->
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="类型名称" prop="goods_name">
            <el-input
              type="text"
              v-model="ruleForm.goods_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- /form -->
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowEditTk = false">取 消</el-button>
          <el-button type="primary" @click="sumit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- --------------------------------------------------------------------------------------- -->
    </el-card>
  </div>
</template>
<script>
import {
  getGoodsGuanIndex,
  deleteGoodsGuanIndex,
  putGoodsGuanIndex,
  postGoodsGuanCreate
} from "@/api";
export default {
  created() {
    this.initData();
  },
  data() {
    return {
      //控制分页
      pagenum: "",
      pagesize: "",
      //控制按钮的开关状态
      value: true,

      isShowEditTk: false,

      //设置页面变量
      tableData: [],

      //搜索数据
      val: "",

      //日期
      date: [],

      //用来收集表单编辑参数的变量，当后期点击的时候，会把这一行的数据保存进去，然后参数时从里面调用就可
      ruleForm: {}
    };
  },
  methods: {
    //请求接口获取数据渲染页面
    initData() {
      getGoodsGuanIndex({
        pagenum: this.pagenum,
        pagesize: this.pagesize,
        goods_name: this.val,
        start_time: this.start_time,
        end_time: this.end_time
      }).then(res => {
        console.log(res);
        this.tableData = res.data.list;
      });
    },

    //编辑
    editFn(rrow) {
      //显示编辑弹框
      this.isShowEditTk = true;
      this.ruleForm = rrow;
    },
    sumit() {
      this.isShowEditTk = false;
      postGoodsGuanCreate({
        goods_name: this.ruleForm.goods_name,
        goods_number: this.ruleForm.goods_number,
        market_price: this.ruleForm.market_price,
        shop_price: this.ruleForm.shop_price,
        thumb: "http://kg.zhaodashen.cn/v2/upload.php",
        cat_id: this.ruleForm.cat_id
      }).then(res => {
        console.log(res);
        if (res.meta.state == 201) {
          this.$message.success("成功");
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },

    //搜索匹配的内容   留心：搜索时传入的参数必须是全的 哪怕那些属性是可选的状态，不然可能会影响搜索结果
    //搜索逻辑：给input双向绑定，点击搜索按钮，发送异步请求（传参，参数等于你搜索的东西），处理异步请求，将获取到的结果重新渲染页面
    searchFn() {
      this.initData();
    },

    //日期的选择
    datachangeFn() {
      // console.log(this.date)
      this.start_time = this.date ? this.date[0] : "";
      this.end_time = this.date ? this.date[1] : "";
      this.initData();
    },

    //删除
    delFn(iid) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteGoodsGuanIndex({
            goods_id: iid
          }).then(res => {
            console.log(res); //这一步请求参数500未解决
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    //点击开关按钮---刷新按钮效果不变
    changeFn(state, row, type) {
      // console.log(row)  是整个当前行数据
      putGoodsGuanIndex({
        goods_id: row.goods_id,
        key: type,
        state: state
      }).then(res => {
        if (res.meta.state == 200) {
          this.$message.success(res.meta.msg);
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },

    //创建跳转
    createFn() {
      this.$router.push({ path: "/goods/create" });
    }
  }
};
</script>

<style lang="scss" scoped>
.goodsGuanIndex {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  //搜索
  .search {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .input-with-select {
    width: 300px;
  }
  .el-table .cell {
    display: flex;
  }
}
</style>
